<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
  aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span>绑定设备</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <p-table [value]="allEquipments" [(selection)]="selectedEquipments" dataKey="id" [paginator]="true" [rows]="10">

              <ng-template pTemplate="header" let-columns>
                <tr>
                  <th style="width: 38px">
                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                  </th>
                  <th style="width: 150px">
                    名称
                  </th>
                  <th style="width: 150px">
                    编码
                  </th>
                  <th style="width: 150px">
                    设备能力
                  </th>
                  <th style="width: 150px">
                    是否热处理
                  </th>
                </tr>
              </ng-template>

              <ng-template pTemplate="body" let-rowData>
                <tr [pSelectableRow]="rowData">
                  <td>
                    <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                  </td>
                  <th style="width: 150px">
                    {{ rowData.equipName }}
                  </th>
                  <th style="width: 150px">
                    {{ rowData.code }}
                  </th>
                  <th style="width: 150px">
                    {{ rowData.equipCapacity ? '多能力' : '单能力' }}
                  </th>
                  <th style="width: 150px">
                    {{ rowData.isHeatEquip ? '是' : '否' }}
                  </th>
                </tr>
              </ng-template>
            </p-table>
            <div class="note note-warning" style="margin-bottom: 0; margin-top: 15px">
                <h4>已绑定设备</h4>
                <li *ngFor="let equipment of selectedEquipments" style="text-align: left">
                    {{'名称：' + equipment.equipName + '；'}}
                </li>
            </div>

          </div>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
          <button type="submit" class="btn btn-primary" [disabled]="!editForm.form.valid" [buttonBusy]="saving"
            [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
        </div>
      </form>
    </div>
  </div>
</div>
